<template>
  <div class="barrages-drop">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
    >
    </vue-baberrage>
  </div>
</template>
<script>
import Vue from "vue";
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";
Vue.use(vueBaberrage);
export default {
  name: "Barrages",
  data() {
    return {
      msg: "~",
      barrageIsShow: true,
      messageHeight: 1,
      boxHeight: 550,
      barrageLoop: true,
      maxWordCount: 3,
      throttleGap: 4000,
      barrageList: [],
      newList: []
    };
  },
  props: {
    browserList: {
      type: Array,
      required: true
    }
  },
  watch: {
    browserList: {
      handler(val) {
        this.newList = val
        this.addToList()
      },
      immediate:true,
      deep:true
    }
  },
  mounted() {
    // this.addToList();
  },
  methods: {
    addToList() {
      const _this = this;
      let list = _this.newList
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle,
        });
      });
    },
  },
};
</script>
<style lang="scss" scope>
.barrages-drop {
  //    position: fixed;
  background-color: #ff8d90;
  .blue {
    border-radius: 100px;
    background: #e6ff75;
    color: #fff;
  }
  .green {
    border-radius: 100px;
    background: #75ffcd;
    color: #fff;
  }
  .red {
    border-radius: 100px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {
    border-radius: 100px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 500px;
    overflow: hidden;
    z-index: 10;
    top: -130px;
    margin-top: 130px;
  }
}
</style>